<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增问卷')" />
</head>
<body>
    <div class="main-content">
        <form class="form-horizontal m" id="form-questionnaire-add">
        	<input name="categoryId" class="form-control" type="hidden" value="1" id="treeId">
        	<h4 class="form-header h4">问卷信息</h4>
        	<div class="row">
            	<div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-xs-2 control-label is-required">问卷名称：</label>
                        <div class="col-xs-10">
                            <input name="questionnaireName" class="form-control" type="text" maxlength="30" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">问卷分类：</label>
                        <div class="col-sm-8">
                            <div class="input-group">
					            <input onclick="selectCategoryTree()" class="form-control" id="treeName" type="text" value="默认分类" placeholder="请选择归分类" readonly required>
					            <span class="input-group-addon"><i class="fa fa-search"></i></span>
					        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">是否显示题号：</label>
                        <div class="col-sm-8">
                            <label class="toggle-switch switch-solid">
		                        <input type="checkbox" id=isShowNo checked>
		                        <span></span>
		                    </label>
                        </div>
                    </div>
                </div>
            </div>
            <h4 class="form-header h4">问卷题目信息</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addColumn()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delColumn()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table"></table>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    
    <div class="modal inmodal fade" id="editDialog" tabindex="-1" role="dialog" aria-hidden="true">
	    <div class="modal-dialog  modal-lg">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
	                </button>
	                <h4 class="modal-title">编辑题目</h4>
	            </div>
	            <div id="questionEditBody" class="modal-body">
	                <form class="form-horizontal m">
	                	<div class="row">
			            	<div class="col-sm-6">
			                    <div class="form-group">
			                        <label class="col-sm-4 control-label is-required">样式类型：</label>
			                        <div class="col-sm-8">
			                            <select class="form-control">
							            	<option value="01">默认</option>
							            	<option value="02">边框</option>
							            	<option value="03">拼接</option>
							            </select>
			                        </div>
			                    </div>
			                </div>
			                <div class="col-sm-6">
			                    <div class="form-group">
			                        <label class="col-sm-4 control-label is-required">展示类型：</label>
			                        <div class="col-sm-8">
			                            <select class="form-control">
							            	<option value="01">每行一项</option>
							            	<option value="02">每行二项</option>
							            	<option value="03">每行三项</option>
							            	<option value="04">每行四项</option>
							            </select>
			                        </div>
			                    </div>
			                </div>
			            </div>
			            <div class="row">
			            	<div class="col-sm-6">
			                    <div class="form-group">
			                        <label class="col-sm-4 control-label is-required">题目显示：</label>
			                        <div class="col-sm-8">
			                             <select class="form-control">
											 <option value="01">显示题目</option>
										     <option value="02">显示选项</option>
			                             </select>
			                        </div>
			                    </div>
			                </div>
			                <div class="col-sm-6">
			                </div>
			            </div>
			            <div class="row">
			                <div class="col-sm-12">
			                    <div class="form-group">
			                        <label class="col-sm-2 control-label is-required">分组题干：</label>
			                        <div class="col-sm-10">
			                            <input class="form-control" type="text" >
			                        </div>
			                    </div>
			                </div>
			            </div>
	                </form>
	                <table id="table-answer"></table>
	            </div>
	
	            <div class="modal-footer">
	                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary">保存</button>
	            </div>
	        </div>
	    </div>
	</div>
    
    <th:block th:include="include :: footer" />
    <script th:src="@{/js/jquery.tmpl.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "qa/questionnaire"
        $("#form-questionnaire-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
            	var data = $("#form-questionnaire-add").serializeArray();
            	var isShowNo = $("input[id='isShowNo']").is(':checked') == true ? 0 : 1;
            	data.push({"name": "isShowNo", "value": isShowNo});
            	data.push({"name": "isPublish", "value": 1});
                $.operate.saveTab(prefix + "/add", data);
            }
        }
        
        /* 问卷管理-新增-选择分类树 */
        function selectCategoryTree() {
			var options = {
                title: '分类选择',
                width: "380",
                url: ctx + "qa/category/selectCategoryTree/" + $("#treeId").val(),
                callBack: doSubmit
            };
            $.modal.openOptions(options);
		}
		
		function doSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			var body = layer.getChildFrame('body', index);
   			$("#treeId").val(body.find('#treeId').val());
   			$("#treeName").val(body.find('#treeName').val());
   			layer.close(index);
		}
		
		$(function() {
            var options = {
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: [{
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    width: '50px',
                    title: "题号",
                    formatter: function (value, row, index) {
                    	var columnIndex = $.common.sprintf("<input type='hidden' name='questionnaireQuestionsList[%s].questionsIndex' value='%s'>", $.table.serialNumber(index));
                    	return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'questionsType',
                    align: 'center',
                    title: '题型',
                    width: '98px',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='questionnaireQuestionsList[%s].questionsType' value='%s'>", index, value);
                        var data = [{ index: index, type: value }];
		                return $("#questionsTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'title',
                    align: 'center',
                    title: '题目',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='questionnaireQuestionsList[%s].title' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'totalScore',
                    align: 'center',
                    title: '分值',
                    width: '80px',
                    formatter: function(value, row, index) {
                    	
                        var html = $.common.sprintf("<input class='form-control' type='number' name='questionnaireQuestionsList[%s].totalScore' value='%s' readonly ><input type='hidden' name='questionnaireQuestionsList[%s].showType' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].showStyle' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].isShowTitle' value='%s'><input type='hidden' name='questionnaireQuestionsList[%s].answer' value='%s'>", 
                        		index, value,index,row.showType,index,row.showStyle,index,row.isShowTitle,index,row.answer);
                        return html;
                    }
                },
                {
                    align: 'center',
                    title: '编辑',
                    formatter: function(value, row, index) {
                    	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs" href="javascript:editQuestions('+index +')"><i class="fa fa-edit"></i>编辑</a> ');
						return actions.join('');
                    }
                
                }]
            };
            $.table.init(options);
        });

        function addColumn() {
            var count = $("#" + table.options.id).bootstrapTable('getData').length;
            sub.editColumn();
        	
            $("#" + table.options.id).bootstrapTable('insertRow', {
                index: count,
                row: {
                    index: $.table.serialNumber(count),
                    questionsIndex: "",
                    title: "",
                    totalScore: "",
                    questionsType: "",
                    showType: "",
                    showStyle: "",
                    isShowTitle: "0",
                    answer: ""
                }
            });
        }
        
        function editQuestions(index){
        	
        	//alert(JSON.stringify(data))
        	$("#editDialog").modal("show");	
        }
        
       
    </script>
</body>
</html>

<!-- 商品类型 -->
<script id="questionsTypeTpl" type="text/x-jquery-tmpl">
<div>
<select class='form-control' name='questionnaireQuestionsList[${index}].questionsType'>
    <option value="01" {{if type==="01"}}selected{{/if}}>单选题</option>
	<option value="02" {{if type==="02"}}selected{{/if}}>单选组</option>
	<option value="03" {{if type==="03"}}selected{{/if}}>判断题</option>
    <option value="04" {{if type==="04"}}selected{{/if}}>判断组</option>
    <option value="11" {{if type==="11"}}selected{{/if}}>复选题</option>    
    <option value="21" {{if type==="21"}}selected{{/if}}>填空题</option>
</select>
</div>
</script>